<template>
  <div>
    <h1>姓名:{{car.name}}</h1>
    <br>
    <h1>年龄:{{car.age}}</h1>
    <br>
    <h1>车的类型:{{car.type.c1}}, {{car.type.c2}}</h1>
    <br>
    <button @click="changeName">更改姓名</button>
    <button @click="changeAge">改变年龄</button>
    <button @click="changeCarType">更改车的类型</button>
  </div>
</template>

<script setup lang="ts">
  import {reactive, watch} from 'vue';
  let car = reactive({
    name: 'Car',
    age: 10,
    type: {
      c1: "小米su7",
      c2: "大众"
    }
  })
  function changeName() {
    car.name += "~";
  }
  function changeAge() {
    car.age += 1;
  }
  function changeCarType() {
    car.type = {
      c1: "汽车1",
      c2: "汽车2"
    }
  }

</script>

<style scoped>

</style>